<template>
  <div class="homePage_main">
    <!--    标题-->
    <div class="homePage_title">健康管理与咨询系统</div>
    <!--    主体内容-->
    <div class="homePage_context">

      <div class="homePage_left">
        <el-card class="homePage_card_min">
          <template #header>
            <div class="card-header">
              <span>系统公告</span>
            </div>
          </template>
          <div v-for="item in systemNotice">
            <span style="color: #888FA1;font-size: 14px">{{ parseTime(item.createTime,'{y}-{m}-{d}') }}</span>
            ------{{ item.text }}
          </div>
        </el-card>
        <el-card class="homePage_card_min" style="float: right">
          <template #header>
            <div class="card-header">
              <span>Ai模型情况</span>
            </div>
          </template>
          正常
        </el-card>
        <el-card class="homePage_card_max">
          <template #header>
            <div class="card-header">
              <span>数据信息</span>
            </div>
          </template>
        </el-card>
      </div>

      <div class="homePage_right">
        <el-card class="homePage_card_right">
          <template #header>
            <div class="card-header">
              <span>用户动态</span>
            </div>
          </template>
        </el-card>
      </div>
    </div>

  </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
import {getNoticeAllApi, getNoticeListApi} from "@/api/noticeApi.js";
import {parseTime} from "@/tool/utils.js";

const noticeSX = ref({
  noticeType: 'system'
})
const systemNotice = ref([{
  id: 1,
  text: '一条系统公告',
  createTime: '2025-1-1'
}]);

onMounted(() => {
  getSystemNotice()
})

function getSystemNotice() {
  getNoticeAllApi(noticeSX.value).then(res => {
    systemNotice.value = res.data.noticeList
  })
}
</script>


<style scoped>
.homePage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.homePage_title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

.homePage_context {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  margin-left: 15px;
}

.homePage_left {
  width: 70%;
  height: 100%;
}

.homePage_card_min {
  width: 45%;
  height: 300px;
  max-width: 45%;
  display: inline-block;
  margin-bottom: 10px;
}

.homePage_card_max {
  width: 100%;
  height: 100%;
}

.homePage_card_right {
  width: 95%;
  height: 100%;
  float: right;
}

.homePage_right {
  width: 30%;
  height: 100%;
}
</style>